TextField এবং Dropdown এর ব্যবহার

Flutter এ TextField এবং Dropdown Widget ব্যবহার করে আপনি ব্যবহারকারীর ইনপুট সংগ্রহ এবং অপশন থেকে একটি নির্বাচন করানোর ব্যবস্থা করতে পারেন। এগুলো সাধারণত ফর্ম তৈরিতে বা ডেটা সংগ্রহের জন্য ব্যবহৃত হয়। নিচে TextField এবং Dropdown এর বিস্তারিত ব্যাখ্যা এবং উদাহরণ দেয়া হলো।

TextField:

TextField হলো একটি ইনপুট Widget, যা ব্যবহারকারী থেকে টেক্সট ইনপুট গ্রহণ করতে ব্যবহৃত হয়। এটি সাধারণত নাম, ইমেইল, পাসওয়ার্ড, বা অন্য টেক্সট ডেটা সংগ্রহের জন্য ব্যবহৃত হয়।

TextField এর বৈশিষ্ট্য:

• controller: TextEditingController ব্যবহার করে ইনপুটের মান সংগ্রহ এবং আপডেট করা যায়।
• decoration: TextField এর স্টাইল কাস্টমাইজ করতে InputDecoration ব্যবহার করা হয়।
• keyboardType: কী-বোর্ড টাইপ নির্ধারণ করতে, যেমন টেক্সট, নম্বর, ইমেইল ইত্যাদি।
• obscureText: পাসওয়ার্ড বা সিকিউর টেক্সট ইনপুটের জন্য ব্যবহার করা হয়।

TextField এর উদাহরণ:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TextField Example',
      home: Scaffold(
        appBar: AppBar(
          title: Text('TextField Example'),
        ),
        body: Padding(
          padding: EdgeInsets.all(16.0),
          child: MyForm(),
        ),
      ),
    );
  }
}

class MyForm extends StatefulWidget {
  @override
  _MyFormState createState() => _MyFormState();
}

class _MyFormState extends State<MyForm> {
  final TextEditingController _nameController = TextEditingController();

  @override
  void dispose() {
    _nameController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        TextField(
          controller: _nameController,
          decoration: InputDecoration(
            labelText: 'Name',
            hintText: 'Enter your name',
            border: OutlineInputBorder(),
          ),
        ),
        SizedBox(height: 16.0),
        ElevatedButton(
          onPressed: () {
            print('Name: ${_nameController.text}');
          },
          child: Text('Submit'),
        ),
      ],
    );
  }
}

• controller: _nameController এর মাধ্যমে ইনপুট ফিল্ডের মান সংগ্রহ করা হয়েছে।
• decoration: InputDecoration ব্যবহার করে লেবেল, হিন্ট, এবং বর্ডার স্টাইল করা হয়েছে।
• SizedBox: বাটন এবং TextField এর মধ্যে স্পেস যোগ করা হয়েছে।

DropdownButton:

DropdownButton ব্যবহার করে আপনি একটি ড্রপডাউন মেনু তৈরি করতে পারেন, যেখানে ব্যবহারকারী একটি অপশন থেকে নির্বাচন করতে পারেন। এটি সাধারণত ফর্মের একটি গুরুত্বপূর্ণ উপাদান, যেমন দেশ নির্বাচন, জেন্ডার নির্বাচন, বা অন্য যেকোনো অপশনের তালিকা।

DropdownButton এর বৈশিষ্ট্য:

• value: ড্রপডাউন বাটনের বর্তমান মান।
• items: ড্রপডাউন মেনুর তালিকা যেখানে প্রতিটি অপশন DropdownMenuItem হিসেবে উপস্থাপিত।
• onChanged: ব্যবহারকারী যখন একটি অপশন সিলেক্ট করে, তখন এই মেথড কল হয় এবং নতুন মান সেট করা হয়।
• hint: ড্রপডাউন মেনুর উপর একটি হিন্ট বা নির্দেশিকা দেখায়।

DropdownButton এর উদাহরণ:

class MyForm extends StatefulWidget {
  @override
  _MyFormState createState() => _MyFormState();
}

class _MyFormState extends State<MyForm> {
  String? _selectedOption;
  final List<String> _options = ['Option 1', 'Option 2', 'Option 3'];

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        DropdownButton<String>(
          value: _selectedOption,
          hint: Text('Select an option'),
          items: _options.map((String value) {
            return DropdownMenuItem<String>(
              value: value,
              child: Text(value),
            );
          }).toList(),
          onChanged: (String? newValue) {
            setState(() {
              _selectedOption = newValue!;
            });
          },
        ),
        SizedBox(height: 16.0),
        ElevatedButton(
          onPressed: () {
            print('Selected Option: $_selectedOption');
          },
          child: Text('Submit'),
        ),
      ],
    );
  }
}

• value: _selectedOption ভেরিয়েবলে বর্তমানে নির্বাচিত অপশন রাখা হয়েছে।
• items: _options তালিকা থেকে প্রতিটি অপশন DropdownMenuItem হিসেবে প্রদর্শন করা হয়েছে।
• onChanged: ব্যবহারকারী যখন একটি অপশন সিলেক্ট করে, তখন নতুন মান _selectedOption এ সেট করা হয়েছে।
• hint: যদি কোনো অপশন সিলেক্ট করা না থাকে, তাহলে একটি নির্দেশিকা (হিন্ট) দেখানো হয়।

TextField এবং DropdownButton এর ব্যবহারিক সুবিধা:

• ডেটা ইনপুট: TextField ব্যবহার করে ব্যবহারকারী বিভিন্ন ডেটা ইনপুট করতে পারেন, যেমন টেক্সট, নম্বর, ইমেইল ইত্যাদি।
• অপশন নির্বাচন: DropdownButton ব্যবহার করে ব্যবহারকারী একটি তালিকা থেকে একটি অপশন বেছে নিতে পারেন।
• কাস্টমাইজেশন: TextField এবং DropdownButton দুটোই কাস্টমাইজ করা যায় যাতে আপনি বিভিন্ন স্টাইল এবং ফাংশনালিটি যোগ করতে পারেন।

TextField এবং DropdownButton সংক্ষেপে আলোচনা:

TextField এবং DropdownButton এর মাধ্যমে Flutter এ একটি সম্পূর্ণ ইনপুট ফর্ম তৈরি করা যায়, যা ব্যবহারকারীর ইনপুট গ্রহণ ও প্রক্রিয়াজাত করে।